<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"><span>默认文本</span></div>

    <script src="jquery.min.js"></script>
    <script>
      // jq 获取元素, jquery 对象
      let app = $("#app");
      console.log(app);

      // 获取内容
      console.log(app.html());
      console.log(app.text());

      // 修改内容
      app.text("修改后的文本");
      //   console.log(document.querySelector("#app"));
      //   console.log(document.getElementById("app"));

      // js --> jq
      $(document.querySelector("#app"));
      // jq --> js
      //   app.get(0); app[0]

      $(function () {
        console.log("页面加载完成");
      });

      $(function () {
        console.log("页面加载完成2");
      });

      $("#app").click(function () {
        console.log("点击了");
      });

      $("#app").on("click", function () {});

      let items = document.querySelectorAll(".item");

      $(".item").click(function () {});
    </script>
  </body>
</html>
